import { Carousel as CarouselAntd } from 'antd';
import carousel1 from '../../assets/CarouselImg/image1.png';
import carousel2 from '../../assets/CarouselImg/image2.png';
import carousel3 from '../../assets/CarouselImg/image3.png';
import carousel4 from '../../assets/CarouselImg/image4.png';

/**
 * 轮播图组件 用于展示图片
 * @returns
 */
const Carousel = () => {
  return (
    <div className="w-full h-[500px] overflow-hidden">
      <CarouselAntd draggable>
        <div className="w-full h-[500px]">
          <img
            className="w-full h-full object-cover"
            src={carousel1}
            alt="carousel"
          />
        </div>
        <div className="w-full h-[500px]">
          <img
            className="w-full h-full object-cover"
            src={carousel2}
            alt="carousel"
          />
        </div>
        <div className="w-full h-[500px]">
          <img
            className="w-full h-full object-cover"
            src={carousel3}
            alt="carousel"
          />
        </div>
        <div className="w-full h-[500px]">
          <img
            className="w-full h-full object-cover"
            src={carousel4}
            alt="carousel"
          />
        </div>
      </CarouselAntd>
    </div>
  );
};

export default Carousel;
